import React from 'react';
import {connect} from 'dva';
import {Row, Col, Form,  Input, InputNumber, DatePicker, Select} from 'antd';
import LgPortSelect from '../../../components/logistics/LgPortSelect';
const dateFormat = 'YYYY-MM-DD';
import moment from 'moment'
import OperatorConstant from '../../../utils/OperatorConstant';
const FormItem = Form.Item;
const R = require("ramda");


const lgOdBase = Form.create()(class LgOdBase extends React.Component {
    constructor(props) {
        super(props);
    }


    handleResetFields = () => {
        this.props.form.resetFields();
    }


    handleConfirm = () => {
        this.props.form.validateFields((errors, values) => {

            let dataSource = this.props.logisticsOrder.dataSource.base ? this.props.logisticsOrder.dataSource.base : {};
            if (errors) return;

            if (this.props.type == OperatorConstant.view) {
                return;
            }

            let method = '';
            if (this.props.type == OperatorConstant.add) {
                method = 'logisticsOrder/add';


            } else if (this.props.type == OperatorConstant.edit) {
                method = 'logisticsOrder/update';

            }

            let payload = {
                id: dataSource.id,
                supplierId: values.supplierId,
                serviceType: values.serviceType,
                loadingPort: values.loadingPort,
                destinationPort: values.destinationPort,
                berthingName: values.berthingName,
                size20gp: values.size20gp,
                size40gp: values.size40gp,
                size40hq: values.size40hq,
                weight20gp: values.weight20gp,
                weight40gp: values.weight40gp,
                weight40hq: values.weight40hq,
                memo: values.memo,
                voyage: values.voyage,
                etdDate: values.etdDate ? values.etdDate.format(dateFormat) : '',
                cyCloseTime: values.cyCloseTime ? values.cyCloseTime.format(dateFormat) : '',
                cntrNo: values.cntrNo,
                sealNumber: values.sealNumber,
                consignee: values.consignee,

                onSuccess: (data) => {
                    this.props.handleCancel();
                },

                onFail: (data) => {
                    this.props.handleCancel();
                },


            };

            if (!R.equals(R.pick(Object.keys(values), dataSource), values)) {
                this.props.dispatch({
                    type: method,
                    payload: payload,
                });
            }else{
                message.info("您未修改任何基本信息！");
                //this.props.handleCancel();
            }


        });
    };


    render() {
        const {getFieldDecorator} = this.props.form;
        let dataSource = this.props.logisticsOrder.dataSource.base ? this.props.logisticsOrder.dataSource.base : {};

        let formItemLayout = {
            labelCol: {xs: {span: 24}, sm: {span: 9}},
            wrapperCol: {xs: {span: 24}, sm: {span: 10}}
        };
        const formItemLayout2 = {
            labelCol: {span: 5},
            wrapperCol: {span: 18}
        };


        return (
            <Form>
                <Row>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="收货人" hasFeedback>
                            {getFieldDecorator('consignee', {
                                rules: [{
                                    required: false, message: '',
                                }],
                                initialValue: dataSource.consignee,
                            })(
                                <Input disabled={this.props.disabled} maxLength="48"/>,
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="服务类型" hasFeedback>
                            {getFieldDecorator('serviceType', {
                                rules: [{
                                    required: true, message: '请选择服务类型',
                                }],
                                initialValue: dataSource.serviceType
                            })(
                                <Select disabled={this.props.disabled}>
                                    <Select.Option value="1">海运</Select.Option>
                                    <Select.Option value="2">空运</Select.Option>
                                    <Select.Option value="3">快递</Select.Option>
                                    <Select.Option value="4">FOB</Select.Option>
                                </Select>
                            )}
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="起始港" hasFeedback>
                            {getFieldDecorator('loadingPort', {
                                rules: [{
                                    required: true, message: '请输入起始港',
                                }],
                                initialValue: R.isNil(dataSource.loadingPort) ? undefined : dataSource.loadingPort + ""
                            })(
                                <LgPortSelect allowClear disabled={this.props.disabled}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="目的港" hasFeedback>
                            {getFieldDecorator('destinationPort', {
                                rules: [{
                                    required: true, message: '请输入目的港',
                                }],
                                initialValue: R.isNil(dataSource.destinationPort) ? undefined : dataSource.destinationPort + ""
                            })(
                                <LgPortSelect allowClear disabled={this.props.disabled}/>
                            )}
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="物流订单编编号" hasFeedback>
                            {getFieldDecorator('orderNo', {
                                rules: [{
                                    required: false, message: '',
                                }],
                                initialValue: dataSource.orderNo
                            })(
                                <Input disabled={true} maxLength="48"/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="进出口订单编编号" hasFeedback>
                            {getFieldDecorator('ieOrderId', {
                                rules: [{
                                    required: false, message: '',
                                }],
                                initialValue: dataSource.ieOrderId
                            })(
                                <Input disabled={true} maxLength="48"/>
                            )}
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="船公司名称" hasFeedback>
                            {getFieldDecorator('berthingName', {
                                rules: [{
                                    required: true, message: '请输入船公司名称',
                                }],
                                initialValue: dataSource.berthingName
                            })(
                                <Input disabled={this.props.disabled} maxLength="48"/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="航程KM" hasFeedback>
                            {getFieldDecorator('voyage', {
                                rules: [{
                                    required: false, message: '',
                                }],
                                initialValue: dataSource.voyage
                            })(
                                <Input disabled={this.props.disabled} maxLength="48"/>
                            )}
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="20GP" hasFeedback>
                            {getFieldDecorator('size20gp', {
                                rules: [{
                                    required: false, message: '',
                                }],
                                initialValue: dataSource.size20gp
                            })(
                                <InputNumber style={{width: '100%'}} disabled={this.props.disabled}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="KGS" hasFeedback>
                            {getFieldDecorator('weight20gp', {
                                rules: [{
                                    required: false, message: '',
                                }],
                                initialValue: dataSource.weight20gp
                            })(
                                <InputNumber style={{width: '100%'}} disabled={this.props.disabled}/>
                            )}
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="40GP" hasFeedback>
                            {getFieldDecorator('size40gp', {
                                rules: [{
                                    required: false, message: '',
                                }],
                                initialValue: dataSource.size40gp
                            })(
                                <InputNumber style={{width: '100%'}} disabled={this.props.disabled}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="KGS" hasFeedback>
                            {getFieldDecorator('weight40gp', {
                                rules: [{
                                    required: false, message: '',
                                }],
                                initialValue: dataSource.weight40gp
                            })(
                                <InputNumber style={{width: '100%'}} disabled={this.props.disabled}/>
                            )}
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="40HQ" hasFeedback>
                            {getFieldDecorator('size40hq', {
                                rules: [{
                                    required: false, message: '',
                                }],
                                initialValue: dataSource.size40hq
                            })(
                                <InputNumber style={{width: '100%'}} disabled={this.props.disabled}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="KGS" hasFeedback>
                            {getFieldDecorator('weight40hq', {
                                rules: [{
                                    required: false, message: '',
                                }],
                                initialValue: dataSource.weight40hq
                            })(
                                <InputNumber style={{width: '100%'}} disabled={this.props.disabled}/>
                            )}
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="截关时间" hasFeedback>
                            {getFieldDecorator('cyCloseTime', {
                                rules: [{
                                    required: false, message: '',
                                }],
                                initialValue: dataSource.cyCloseTime ? moment(dataSource.cyCloseTime, dateFormat) : undefined
                            })(
                                <DatePicker disabled={this.props.disabled} maxLength="48"/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="预计开船时间" hasFeedback>
                            {getFieldDecorator('etdDate', {
                                rules: [{
                                    required: false, message: '',
                                }],
                                initialValue: dataSource.etdDate ? moment(dataSource.etdDate, dateFormat) : undefined
                            })(
                                <DatePicker disabled={this.props.disabled} maxLength="48"/>
                            )}
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="封号" hasFeedback>
                            {getFieldDecorator('sealNumber', {
                                rules: [{
                                    required: false, message: '',
                                }],
                                initialValue: dataSource.sealNumber
                            })(
                                <Input disabled={this.props.disabled} maxLength="48"/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="柜号" hasFeedback>
                            {getFieldDecorator('cntrNo', {
                                rules: [{
                                    required: false, message: '',
                                }],
                                initialValue: dataSource.cntrNo,
                            })(
                                <Input disabled={this.props.disabled} maxLength="48"/>,
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={22}>
                        <FormItem {...formItemLayout2} label="备注" hasFeedback>
                            {getFieldDecorator('memo', {
                                rules: [{
                                    required: false, message: '',
                                }],
                                initialValue: dataSource.memo,
                            })(
                                <Input disabled={this.props.disabled} maxLength="48"/>,
                            )}
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        )
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.logisticsOrder, logisticsOrder: state.logisticsOrder
    };
}

export default connect(mapStateToProps)(lgOdBase);